<template>
	<view>
		<view style="width: 750rpx ;height: 1100rpx;">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
		</view>
		<view style="display: flex; flex-direction: column; gap: 10rpx;">
			<view style="display: flex; justify-content: space-between;">
				<button @click="onClick('clear')">清空</button>
				<button @click="onClick('undo')">撤消</button>
			</view>
			<view style="display: flex; justify-content: space-between;">
				<button @click="onClick('save')">保存</button>
				<!-- uvue 不支持 openSmooth -->
				<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello',
            penColor: 'black',
            penSize: 5,
            url: '',
            openSmooth: true
        }
    },
    methods: {
        onClick(type) {
             if(type == 'openSmooth') {
                 this.openSmooth = !this.openSmooth
                 return
             }
            if (type == 'save') {
                this.$refs.signatureRef.canvasToTempFilePath({
                    success: (res) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
												console.log(res.tempFilePath)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
												// ###
												uni.saveImageToPhotosAlbum({
												  filePath: this.url, // 需要保存的图片路径
												  success: function (res) {
												    console.log(res);
												    uni.showToast({
												      title: '保存成功'
												    });
												  },
												  fail: function (err) {
												    console.log('保存失败', err);
												    // 如果保存失败，可能是因为没有权限，需要请求权限或提示用户去设置中开启权限
												  }
												});
												// ###
                    }
                })
                return
            }
            if (this.$refs.signatureRef)
                this.$refs.signatureRef[type]()
        }
    }
}
</script>

<style>
button{
	width: 200rpx;
}
</style>
